<template>
	<view>
		<!-- 以下style样式均为实现动画效果 -->
		<view @click.stop="showClick" class="timePicker" style="position:relative" v-if="item.state != 4 && item.state != 2">
			<u-icon name="more-dot-fill" size="28"></u-icon>
		</view>
		<!-- style 其中40*4 40为列表格的固定高度，单位为px，4为列表格数量 -->
		<view class="bubble" style="position: absolute;z-index: 101;" v-if="show && item.state != 4">
			<!-- 展示行 -->
			<!-- 判断条件---缺 -->
			<view class="box-in" @click.stop="urgeClick(item.orderNo)" v-if="item.state == 3 && !item.urgentTesting">催检测</view>
			<view class="box-in" @click.stop="refoundClick(item)" v-if="item.state == 1 || item.state == 3">退款</view>
			<view class="box-in" @click.stop="reportClick(item.orderNo)" v-if="item.state == 1">详细报告</view>
			<view class="box-in" @click.stop="invoiceClick(item.orderNo)" v-if="item.state == 1">开票</view>
		</view>
		<u-overlay :show="show && item.state != 4" @click.stop="showClick" opacity="0" customStyle="z-index:100"></u-overlay>
	</view>
</template>

<script>
	export default {
		name: "button",
		data() {
			return {
				show: false
			};
		},
		props: {
			item: null
		},
		methods: {
			showClick() {
				//如果show值为true，则更改为false 反之设置true
				this.show = !this.show
			},

			// 开发票
			invoiceClick(e) {
				this.show = false
				// 跳转到申请发票页
				uni.navigateTo({
					url: `/pagesA/pages/invoice/invoice?i=${e}`
				})
			},
			// 退款
			refoundClick(e) {
				this.show = false
				// 跳转退款页面
				uni.navigateTo({
					url: `/pagesB/pages/refound/refound?i=${JSON.stringify(e)}`
				})
				uni.setStorageSync('refoundInfo', JSON.stringify(e));
			},
			//催检测
			async urgeClick(val) {
				this.show = false
				this.$emit('urgent',val)
			},
			// 报告下载
			reportClick(val) {
				this.show = false
				this.$emit('downFile',val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bubble {
		width: 190rpx;
		background: #fff;
		border: 1rpx solid #ddd;
		border-radius: 14rpx;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
	}

	// .bubble::before{
	//   content: '';
	//   position: absolute;
	//   left:50rpx;
	//   bottom:-32rpx;
	//   z-index: 2;
	//   width: 0;
	//   height: 0;
	//   border: 18rpx solid;
	//   border-color: rgb(211, 207, 207) transparent  transparent  transparent ;
	// }
	.box {
		width: 30%;
		overflow: hidden;
		background-color: #fff;
		box-shadow: 0 0 15rpx black
	}

	.box-in {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		padding-left: 10rpx;
		border-bottom: #E5E5E5 1rpx solid;
		z-index: 99;
	}
</style>
